<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 界面</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/login.css">

</head>

<body>
    <main id="wrap">
        <div class="sign-wrap">

            <div class="sign-wrap-inner">
                <div class="inner-left  sign-slider-box">
                    <ul>
                        <li class="logo">
                            <a href="./shouye.html">
                                <img src="./img/other/logo.png" alt="">
                                <div>
                                    <p>找工作</p>
                                    <p>上BOSS直聘直接谈</p>
                                </div>
                            </a>
                        </li>
                        <li class="goutong">
                            <i class="icon"></i>
                            <span>招聘</span>
                            <span>在线职位及时沟通</span>
                        </li>
                        <li class="choose">
                            <i class="icon"></i>
                            <span>任性选</span>
                            <span>各大行业职位任你选</span>
                        </li>
                    </ul>
                </div>
                <div class="inner-right sign-content">
                    <div class="inner-box">
                        <div class="sign-tab">
                            <p class="scan-title-text">手机扫码 安全登录</p>
                        </div>
                        <div class="qrcode-box">
                            <p>
                                <span>使用 BOSS直聘 APP 扫码登录</span>
                                <em>扫码帮助</em>
                            </p>
                            <div class="qrcodeimg-box">
                                <img src="./img/other/getqrcode.jpg" alt="">
                            </div>
                        </div>
                        <div class="text-tip">
                            <a href="javascript:;" class="download-btn">下载App</a>
                            <a href="javascript:;" class="pwd-login-btn">账号登录</a>
                            <a href="javascript:;" class="link-signup">免费注册</a>
                        </div>

                    </div>

                    <!-- -----------切换部分 密码登录 -->
                    <div class="inner-box1">
                        <form action="#" method="post">
                            <div class="purpose-row">
                                <span class="cur" data-index="1">密码</span>
                                <span data-index="2">短信</span>
                            </div>
                            <div class="form-row row-select">
                                <span class="dropdown-select">
                                    <i class="icon-select-arrow"></i>
                                    <em class="text-select">+86</em>
                                    <input type="hidden" name="regionCode" id="" value="+86">
                                </span>
                                <span class="ipt-wrap">
                                    <i class="icon-sign-phone"></i>
                                    <input type="tel" class="ipt ipt-phone required" placeholder="手机号" name="phone">
                                </span>
                                <!-- 放置选择地址   渲染上去 -->
                                <div class="dropdown-menu">
                                    <ul>

                                    </ul>
                                </div>
                                <!-- <div class="tip-error"> 
                                    请填写手机号
                                </div> -->
                            </div>

                            <div class="form-row">
                                <span class="ipt-wrap">
                                    <i class="icon-sign-pwd"></i>
                                    <input type="password" class="ipt ipt-pwd required" name="password"  placeholder="密码">
                                </span>
                            </div>
                            <!-- 点击按钮进行验证 -->
                            <div class="form-row">
                                <div class="row-code">
                                    <div class="verify-init-btn">
                                        <span class="verify-init-dot"></span>
                                        点击按钮进行验证
                                    </div>
                                </div>
                            </div>
                            <div class="form-btn">
                                <button type="submit" class="btn">登录/注册</button>
                            </div>
                            <div class="text-tip">
                                <a href="javascript:;" class="download-btn1">微信登录</a>
                                <a href="javascript:;" class="pwd-login-btn1">扫码登录</a>
                                <a href="javascript:;" class="link-signup1">免费注册</a>
                            </div>
                            <div class="text-argrement">
                                <div class="tip-error"></div>
                                <input type="checkbox" class="agree-policy" name="policy">
                                同意BOSS直聘
                                <a href="#">《用户协议》</a>
                                <a href="#">《个人信息保护政策》</a>
                            </div>
                        </form>
                    </div>
                    <!-- 点击切换到二维码登录部分 -->
                    <div class="btn-switch login-tab-switch  pwd-switch">
                        <div class="switch-tip">
                            账号登录在这里
                        </div>
                    </div>
                    <div class="publicity-info">
                        <p>客服电话 400-065-5799 工作时间：9:30-18:30</p>
                        <p>人力资源服务许可证|营业执照|朝阳区人社局监督电话</p>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
<script src="./jquery-3.6.0.js"></script>
<script>

    $('.btn-switch').removeClass('login-tab-switch ')
    $('.inner-box1').hide()
    //  设定初始值为0
    var count = 0;
    $('.btn-switch').click(function () {
        count++;
        if (count % 2 == 0) {
            $('.inner-box').show()
            $('.inner-box1').hide()

            $('.btn-switch>.switch-tip').text('账号登录在这里')
            $('.btn-switch').removeClass('login-tab-switch ').addClass('pwd-switch')
        } else {
            $('.inner-box').hide()
            $('.inner-box1').show()
            $('.btn-switch>.switch-tip').text('扫码登录更安全')
            $('.btn-switch').removeClass('pwd-switch').addClass('login-tab-switch ')
        }

    })


    //---------------点击切换找工作和招聘--------------------- 
    $('.purpose-row>span').click(function () {
        // 点击第一个找工作   第二个  招聘
        console.log($(this).attr('data-index'));
        // console.log($(this));
        if ($(this).attr('data-index') == 1) {
            $(this).addClass('cur')
            $(this).next().removeClass('cur')

        } else if ($(this).attr('data-index') == 2) {
            $(this).addClass('cur')
            $(this).prev().removeClass('cur')
        }
    })
</script>

</html>